<template>
  <div class="result-con">
    <!-- 结果列表 -->
    <vue-scroll :ops="scrollOps" class="scroll-ul" >
      <ul class="ul">
        <li
          v-for="(item, index) in resultData"
          :key="index"
        >
          <div class="li-title">
            <div class="name">
              <h2
                class="name"
                @click="toDetail(item)"
              >
                {{ item.name }}
              </h2>
              <span class="li-button">
                <!-- 收藏 -->
                <!-- <el-tooltip
                  class="item"
                  effect="dark"
                  :content="!item.isCollect ? '收藏' : '取消收藏'"
                  placement="top"
                >
                  <a
                    class="collect el-icon-star-off"
                    :class="{
                    active: item.isCollect,
                    'el-icon-star-on': item.isCollect,
                    'el-icon-star-off': !item.isCollect,
                  }"
                    @click="collet(item, index)"
                  ></a>
                </el-tooltip> -->
              </span>
            </div>
            <p class="company" @click="toDetail(item)">
              <img
                src="@/assets/img/company-icon.png"
                alt=""
              >
              <span>{{item.org}}</span>
            </p>
          </div>
          <div class="li-content" @click="toDetail(item)">
            <dl class="content">
              <dt>优势领域:</dt>
              <dd :title="item.ipcs && item.ipcs.join('；')">{{item.ipcs && item.ipcs.join('；')}}</dd>
            </dl>
            <div class="number">
              <i>
                <img
                  src="@/assets/img/patent-icon.png"
                  alt=""
                >
              </i>
              <span>专利数量</span>
              <b>{{item.count}}</b>
            </div>
          </div>
        </li>
      </ul>
    </vue-scroll>
    <el-pagination
      background
      v-if="resultData.length > 0"
      @current-change="handleCurrentChange"
      layout="prev, pager, next, jumper"
      :current-page.sync="ipi"
      :page-size="ips"
      :total="total"
      class="elpagination"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    pList: {
      type: Array,
    },
    totalPerson:{
      type:Number,
    }
  },
  data() {
    return {
      loading: true,
      ipi: 1,
      ips: 12,
      total: 0,
      resultData: [],
      scrollOps: {
        vuescroll: {
          mode: "native",
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: "rgba(255,255,255,.1)",
          gutterOfEnds: "10px",
        },
        bar: {
          background: "#c7c8ca",
          size: "8px",
        },
      },
    };
  },
  mounted() {
    if (this.$route.query.ipi) {
      this.ipi = Number(this.$route.query.ipi);
    }
  },
  watch:{
    pList:{
      handler:function(n,o){
        this.handleData(n);
      },
      immediate:true,
      deep:true,
    },
    totalPerson:{
      handler:function(n,o){
        this.total = n;
      },
      immediate:true,
    },
  },
  methods: {
    handleData(result){
      this.resultData = [];
      if (result.length && result.length > 0) {
        this.resultData = result
      }
    },
    numFormat(num) {
      var res = num.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ",";
        });
      });
      return res;
    },
  
    // 进入详情页
    toDetail(item) {
      let url = this.$router.resolve({
        name: "EnergyTalentDetailIntroduction",
        query: {
          key: item.pid || "",
          name: item.name || "",
          companyName: item.org || "",
          count: item.count || 0,
        },
      });
      window.open(url.href, '_blank')
    },
    // 分页
    handleCurrentChange(val) {
      this.$emit('changePageNumPer',val)
    },
  },
};
</script>

<style lang="scss" scoped>
.result-con {
  flex: auto;
  overflow: hidden;
  padding: 0.06rem 0.28rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  background: #f6f7fb;
  .result-total {
    color: #838698;
    font-size: 0.14rem;
    line-height: 0.14rem;
    height: 0.36rem;
    flex: none;
    padding-top: 0.18rem;
    padding-bottom: 0.04rem;
    p {
      float: left;
    }
    span {
      display: inline-block;
      float: right;
    }
  }
  .scroll-ul {
    flex: auto;
    margin-left: -0.14rem;
    .ul {
      display: flex;
      flex-wrap: wrap;
      padding-right: 0.24rem;
      margin-bottom: 0.2rem;
      > li {
        width: calc((100% - 0.96rem) / 4);
        height: 2.44rem;
        background: #fff;
        margin: 0.14rem 0.1rem 0.1rem 0.14rem;
        padding: 0 0.22rem 0 0.18rem;
        overflow: hidden;
        border-radius: 0.08rem;
        border: 1px solid #e4e5e9;
        box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
        position: relative;
        transition: all .4s ease;
        &:hover {
          box-shadow: 0 2px 12px 4px rgba(7, 2, 70, 0.2);
        }
        &::before {
          content: "";
          width: 0.04rem;
          height: 0.36rem;
          background: $mainColor;
          border-radius: 0 0.04rem 0.04rem 0;
          position: absolute;
          left: 0;
          top: 0.18rem;
        }
        .li-title {
          width: 100%;
          border-bottom: 1px solid #f7f7f7;
          padding-top: 0.2rem;
          .name {
            color: #151b31;
            height: 0.3rem;
            line-height: 0.3rem;
            h2 {
              padding: 0 0.35rem 0 0.06rem;
              background: $hoverColor;
              border-radius: 0 0.15rem 0.15rem 0;
              font-style: italic;
              font-size: 0.22rem;
              float: left;
            }
            .li-button {
              float: right;
              color: #9a9b9e;
              font-size: 0.2rem;
              cursor: default;
              .collect {
                margin-right: 0.24rem;
              }
              .el-icon-star-on {
                color: $color120;
                font-size: 0.24rem;
                margin-right: 0.22rem;
              }
              .score {
                font-size: 0.15rem;
              }
            }
          }
          .company {
            line-height: 0.52rem;
            color: #919397;
            font-size: 0.16rem;
            img {
              display: inline-block;
              width: .12rem;
              margin-right: 0.13rem;
              vertical-align: middle;
            }
            span {
              display: inline-block;
              width: calc(100% - .27rem);
              vertical-align: middle;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .li-content {
          width: 100%;
          .content {
            width: 100%;
            line-height: 0.24rem;
            font-size: 0.14rem;
            color: #a6a8bc;
            height: 0.82rem;
            padding: 0.1rem 0 0.13rem 0;
            background-color: transparent;
            dd {
              line-height: 0.2rem;
              font-size: 0.15rem;
              color: #585858;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .number {
            height: 0.3rem;
            color: #82d1d5;
            font-size: 0.12rem;
            display: flex;
            align-items: center;
            i {
              display: inline-block;
              width: 0.3rem;
              height: 0.3rem;
              border-radius: 0.15rem;
              background: #e7fdff;
              display: flex;
              align-items: center;
              justify-content: center;
              float: left;
              margin-right: 0.13rem;
            }
            b {
              font-size: 0.22rem;
              font-style: italic;
              font-weight: 700;
              margin-left: 0.18rem;
            }
          }
        }
      }
    }
  }
  .el-pagination.is-background {
    text-align: right;
    font-weight: 700;
    margin: 0.06rem 0 0.24rem 0;
    ::v-deep .el-pager {
      li:not(.disabled).active {
        background: transparent;
        color: $mainColor;
      }
      li {
        color: #c1c6d2;
        font-size: 0.16rem;
        font-weight: 400;
        background: #f6f7fb;
      }
    }
    ::v-deep .btn-prev {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .btn-next {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .el-pagination__jump {
      color: #c1c6d2;
      font-size: 0.16rem;
      .el-input--medium .el-input__inner {
        height: 0.26rem;
        border: 1px solid $mainColor;
        border-radius: 0;
      }
    }
  }
}
</style>
